<template>
	<view class="tag-item" :style="{ background: themes[getType()].backgroundColor }" @click.stop="handleToClick">
		<text :style="{ color: themes[getType()].color }">{{ itemData }}</text>
	</view>
</template>
<script setup>
const props = defineProps({
	itemData: {
		type: String,
		default: () => {
			return ''
		}
	},
	itemIndex: {
		type: Number,
		default: () => {
			return 0
		}
	},
	type: {
		type: String,
		default: () => {
			return ''
		}
	}
})

const getType = () => {
	let type = 'blue'
	switch (props.itemIndex) {
		case 1:
			type = 'cyan'
			break;
		case 2:
			type = 'orange'
			break;
		default:
			type = 'blue'
			break;
	}
	if (props.type) {
		type = props.type
	}
	return type
}

const themes = {
	// 蓝色
	'blue': {
		color: "#4094FF",
		backgroundColor: "#EBF2FF"
	},
	// 青色
	'cyan': {
		color: "#24BAC2",
		backgroundColor: "#EAF9FA"
	},
	// 橘色
	'orange': {
		color: "#FFAD4F",
		backgroundColor: "#FFF6ED"
	}
}
const emits = defineEmits(['itemClickIndex', 'itemClick'])

const handleToClick = () => {
	emits('itemClick', props.itemData)
	emits('itemClickIndex', props.itemIndex)
}
</script>
<style lang="scss" scoped>
.tag-item {
	height: 42rpx;
	width: fit-content;
	border-radius: 5rpx;
	margin-right: 12rpx;
	align-items: center;
	justify-content: center;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	white-space: nowrap;
	text-overflow: ellipsis;

	text {
		padding: 2rpx 13rpx;
		font-size: 24rpx;
	}
}
</style>